<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<jsp:include page="../jqgrid.jsp"></jsp:include>
</head>
<script type="text/javascript">
var roleId="";
	$(document).ready(function() {
		jQuery("#rolelist").jqGrid({
			url : 'queryRoles.action',
			autowidth : true,
			datatype : "json",
			colNames : [ 'id', '名称', '描述', '是否启用' ],
			colModel : [ {
				name : 'id',
				index : 'id',
				width : 10,
				editable : false,
				searchoptions :{
					sopt:['eq','ne']
				}
			}, {
				name : 'name',
				index : 'name',
				width : 100,
				editable : true,
				editrules:{required:true},
				searchoptions :{
					sopt:['cn','nc']
				}
			}, {
				name : 'description',
				index : 'description',
				width : 90,
				editable : true,
				editrules:{required:true},
				searchoptions :{
					sopt:['cn','nc']
				}
			}, {
				name : 'hasUse',
				index : 'hasUse',
				width : 50,
				align : "center",
				editable : true,
				edittype : "select",
				editoptions : {
					value : 'true:是;false:否'
				},
				formatter : function(cellvalue, options, row) {
					if (cellvalue == true) {
						return "是";
					} else {
						return "否";
					}
				},
				searchoptions :{
					sopt:['cn','nc']
				}
			} ],
			rowNum : 10,
			rowList : [ 10, 20, 30 ],
			pager : '#rolegridPager',
			sortname : 'id',
			viewrecords : true,
			jsonReader : {
				repeatitems : false
			},
			sortorder : "desc",
			caption : "角色列表",
			height:'160',
			editurl : "editRoles.action",
			gridComplete:function(){
				roleId="";
			},
			onSelectRow:function(rowid,status){
				var data = $("#rolelist").getRowData(rowid);
				 jQuery("#treegrid").setGridParam({
					 url:"sysMenu.action?roleId="+data.id
					 }).trigger("reloadGrid"); 
				 roleId=data.id;
			}
		});
		jQuery("#rolelist").jqGrid('navGrid', '#rolegridPager', {
			edit : true,
			add : true,
			del : true
		}, {}, {}, {}, {
			multipleSearch : true
		});
	});
	//配置角色对应的功能
	$(document).ready(function() {
		jQuery("#treegrid").jqGrid({
			url : 'sysMenu.action',
			autowidth : true,
			datatype : "json",
			colNames : [ 'id', 'parent','roleId', '选择', '名称', '描述' ],
			colModel : [ {
				name : 'id',
				index : 'id',
				width : 1,
				hidden : true,
				key : true
			}, {
				name : 'parent',
				index : 'parent',
				width : 1,
				hidden : true
			}, {
				name : 'roleId',
				index : 'roleId',
				width : 1,
				hidden : true
			}, {
				name : 'id',
				index : 'id',
				width : 60,
				align : 'center',
				formatter : function(v, x, r) {
					return '<input type="checkbox" value='+v+' id="checkbox'+v+'"  onclick="clickCheckbox(this)"/>';
				},
			}, {
				name : 'name',
				index : 'name',
				width : 50,
				editable : false
			}, {
				name : 'description',
				index : 'description',
				width : 200,
				editable : false
			} ],
			rowNum : 1000,
			treeGrid : true,
			treeGridModel : 'adjacency',
			treedatatype : "json",
			ExpandColumn : 'name',
			height : 'auto',
			sortname : 'id',
			viewrecords : true,
			treeIcons : {
				leaf : 'ui-icon-document-b'
			},
			jsonReader : {
				root : "menus",
				repeatitems : false
			},
			sortorder : "desc",
			caption : "角色对应功能列表",
			 gridComplete:function(){
				var mydata = $("#treegrid").jqGrid('getGridParam','data');
				//var mydata = $("#treegrid").getRowData();
				for(var i=0;i<mydata.length;i++){
					var checkbox="checkbox"+mydata[i].id;
					//alert(checkbox);
					if(mydata[i].parent!=0 && roleId!=""){
						$("#"+checkbox+"").attr("disabled",null);	
					}else{
						$("#"+checkbox+"").attr("disabled","true");
					}
					if(mydata[i].roleId!=null){
						$("#"+checkbox+"").attr("checked","true");
					}
				}
			} 
		});
	});
	function clickCheckbox(obj){
		var mydata = $("#treegrid").jqGrid('getGridParam','data');
		var currentData;
		for(var i=0;i<mydata.length;i++){
			//alert(mydata[i].name);
			if(mydata[i].id==obj.value){
				currentData=mydata[i];
				break;
			}
		}
		if(roleId==""){
			alert("请先选择角色。");
			return ;
		}
		var menuId=currentData.id;
		if(obj.checked){
			//保存角色对应的功能
			//alert("add currentData:"+currentData.name);
			$.ajax({
				   type: "POST",
				   dataType:"json",
				   url: "addRoleMenuRelation.action?roleId="+roleId+"&menuId="+menuId+"",
				   success: function(data, textStatus){
					   jQuery("#treegrid").setGridParam({
							 url:"sysMenu.action?roleId="+roleId
							 }).trigger("reloadGrid"); 
				   }
				});
		}else{//删除角色对应的功能
			$.ajax({
				   type: "POST",
				   dataType:"json",
				   url: "delRoleMenuRelation.action?roleId="+roleId+"&menuId="+menuId+"",
				   success: function(data, textStatus){
					   jQuery("#treegrid").setGridParam({
							 url:"sysMenu.action?roleId="+roleId
							 }).trigger("reloadGrid"); 
				   }
				});
		}
		//alert("click:"+obj.value+"  check:"+obj.checked+"  id:"+obj.id);
	}
</script>
<body>
	<div align="center">
		<!-- 角色列表 -->
		<table id="rolelist"></table>
		<div id="rolegridPager"></div>
		<!-- 角色对应的功能 -->
		<table id="treegrid"></table>
		<div id="rolemenugridPager"></div>
	</div>
</body>
</html>